import { defineComponent } from 'vue'
import { CommonWidgetPropsDefine } from '../types'

export default defineComponent({
  name: 'NumberField',
  props: CommonWidgetPropsDefine,
  setup(props) {
    const handleChange = (e: any) => {
      const value = e.target.value

      const num = Number(value)

      if (Number.isNaN(num)) {
        props.onChange(undefined)
        e.target.value = undefined
      } else {
        props.onChange(num)
        e.target.value = num
      }
    }
    return () => {
      const { value } = props

      return <input type="number" value={value as any} onInput={handleChange} />
    }
  },
})
